<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./index.js"></script>
    <script type="text/javascript">
        const proxyUser1 = shallowReactive({
            name: '小明',
            car: {
                color: 'red'
            }
        })

        // 拦截到了读和写
        // proxyUser1.name += '=='
        // 拦截到了读没有拦截到写
        // proxyUser1.car.color += '=='
        // 拦截到了删除数据
        // delete proxyUser1.name
        // 拦截到了读取数据没有拦截到删除
        // delete proxyUser1.car.color

        const proxyUser2 = reactive({
            name: '小明',
            car: {
                color: 'red'
            }
        })

        // 拦截到了读和写
        // proxyUser2.name += '=='
        // 拦截到了读和写
        // proxyUser2.car.color += '=='
        // 拦截到了删除数据
        // delete proxyUser2.name
        // 拦截到了读取数据和删除
        // delete proxyUser2.car.color


        // ========================
        // 测试shallowReadonly和readonly
        const proxyUser3 = shallowReadonly({
            name: '小明',
            cars: ['奔驰', '宝马']
        })
        // 可以读取
        // console.log(proxyUser3.name)
        // 不能修改
        // proxyUser3.name += '=='
        // 不能删除
        // delete proxyUser3.name
        // 只读的,拦截不了深度的修改
        // proxyUser3.cars[0]='奥迪'
        // 拦截到了读取, 可以删除
        // delete proxyUser3.cars[0]

        const proxyUser4 = readonly({
            name: '小明',
            cars: ['奔驰', '宝马']
        })
        // 可以读取
        // console.log(proxyUser4.name)
        // 不能修改
        // proxyUser4.name += '=='
        // 不能删除  
        // delete proxyUser4.name
        // 不能修改
        // proxyUser4.cars[0]='奥迪'
        // 不能删除
        // delete proxyUser4.cars[0]

        // =================================
        const ref1 = shallowRef({
            name: '小明',
            car: {
                color: 'red',
            }
        })
        // console.log(ref1.value)
        // 劫持到了修改
        // ref1.value = '=='
        // 劫持不到了修改
        // ref1.value.car = '=='

        const ref2 = ref({
            name: '小明',
            car: {
                color: 'red',
            }
        })
        // 劫持到了修改
        // ref2.value = '=='
        // 劫持到了修改
        // ref2.value.car = '=='

        // =========================================================
        console.log(isRef(ref({})));
        console.log(isReactive(reactive({})));
        console.log(isReadonly(readonly({})));
        console.log(isProxy(readonly({})));
        console.log(isProxy(reactive({})))
    </script>
</body>

</html>